<template>
  <a-table style="margin-top: 20px;" :rowKey="record => JSON.stringify(record)" :columns="columns" :data-source="couponsList" :pagination="false">
    <span slot="description" slot-scope="text">
      <ellipsis :length="ellipsis" tooltip>{{ text }}</ellipsis>
    </span>
    <span slot="action" slot-scope="text, record, index">
      <template>
        <a @click="handleDelete(index)">删除</a>
      </template>
    </span>
  </a-table>
</template>
<script>
import { Ellipsis } from '@/views/box/components'
let columns = [
  { title: '序号', width: 60, customRender: (text, record, index) => `${index + 1}` },
  { title: '券名称', dataIndex: 'name' },
  { title: '描述', dataIndex: 'description', align: 'center', scopedSlots: { customRender: 'description' } },
  { title: '券类型', dataIndex: 'type', customRender: text => (text == 1 ? '折扣券' : text == 0 ? '现金券' : '') },
  { title: '面额', customRender: (text, record) => (record.type == 1 ? record.discount * 100 + '%' : record.type == 0 ? record.amount + '元' : '') },
  { title: '有效期类型', dataIndex: 'expireType', align: 'center', customRender: text => (text == 1 ? '按领取时间顺延' : '指定时间') },
  { title: '有效期', align: 'center', customRender: (text, record) => (record.expireType == 1 ? record.endDays + '天' : record.expireType == 0 ? `${record.startDate}-${record.endDate}` : '') },
  { title: '操作', fixed: 'right', width: 60, align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  components: {
    Ellipsis
  },
  props: {
    ellipsis: {
      type: Number,
      required: false,
      default: 15
    }
  },
  data() {
    return {
      columns,
      couponsList: [],
      type: ''
    }
  },
  methods: {
    setData(list, type) {
      this.couponsList = list
      if (type) this.type = type
    },
    handleDelete(index) {
      this.couponsList.splice(index, 1)
      this.$emit('updateCoupons', this.couponsList, this.type)
    }
  }
}
</script>

